<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        商城管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>出入库记录列表
      </p>
      <div class="content">
        
        <el-table
          style="margin-top:40px"
          :data="tableData"
         :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{height:'0px'}"
          :cell-style="{padding:'0px'}"
          v-loading="listLoading"
        >
          <el-table-column
            prop="batchNo"
            min-width="200"
            label="批次号"
          ></el-table-column>
          <el-table-column
            prop="createDate"
            min-width="200"
            label="入库时间"
          ></el-table-column>

          <el-table-column
            prop="officeUid"
            min-width="250"
            label="机构ID"
            v-if="jurisdiction == 0"
          ></el-table-column>
          <el-table-column
            prop="officeName"
            min-width="180"
            label="机构名称"
            v-if="jurisdiction == 0"
          ></el-table-column>
          <el-table-column
            prop="productName"
            min-width="180"
            label="产品名称"
          ></el-table-column>

          <el-table-column
            prop="typeName"
            min-width="180"
            label="品牌类型"
          ></el-table-column>
          <el-table-column
            prop="productNo"
            min-width="100"
            label="产品型号"
          ></el-table-column>

          <el-table-column
            prop="actualCnt"
            min-width="100"
            label="发生数量"
          ></el-table-column>
          <el-table-column min-width="100" label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.actualType == 0">入库</span>
              <span v-if="scope.row.actualType == 1">出库</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" label="入库状态">
            <template slot-scope="scope">
              <span v-if="scope.row.inStatus == 0">完全入库</span>
              <span v-if="scope.row.inStatus == 1">部分入库</span>
              <span v-if="scope.row.inStatus == 2">完全未入库</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="arriveCnt"
            
            min-width="100"
            label="已入库"
          ></el-table-column>

          <el-table-column  min-width="100" label="出库状态">
            <template slot-scope="scope">
              <span v-if="scope.row.outStatus == 0">完全出库</span>
              <span v-if="scope.row.outStatus == 1">部分出库</span>
              <span v-if="scope.row.outStatus == 2">完全未出库</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="unarriveCnt"
            
            min-width="100"
            label="已出库"
          ></el-table-column>
          <el-table-column
            prop="unsendCnt"
            
            min-width="100"
            label="未出库"
          ></el-table-column>
          <el-table-column
            prop="updateDate"
            
            min-width="200"
            label="更新时间"
          ></el-table-column>
          <el-table-column
            prop="remarks"
            
            min-width="300"
            label="备注"
          ></el-table-column>
        </el-table>
        <el-button type="" @click="back" class="btnExport"
          >返回</el-button
        >
        <el-pagination
          background
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-size="formInline.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from "qs";
export default {
  data() {
    return {
      showType:false,
      organizationLsit: [
        { id: "", label: "全部"},
        { id: "0", label: "入库" },
        { id: "1", label: "出库" },
      ],
      organizationLsits:[
        { id: "", label: "全部"},
        { id: "0", label: "完全入库" },
        { id: "1", label: "部分入库" },
        { id: "2", label: "完全未入库" },
      ],
      organizationLsites:[
        { id: "", label: "全部"},
        { id: "0", label: "完全出库" },
        { id: "1", label: "部分出库" },
        { id: "2", label: "完全未出库" },
      ],
      shelvesId: "",
      titles: "",
      shelves: {},
      dialogVisible: false,
      NameList: [],
      BrandTypeList: [],
      productListData: [],
      listDetailsShow: false,
      addInventoryShow: false,
      recordsShow: false,
      channelUid: "",
      listLoading: false,
      Sid: "",
      jurisdiction: "",
      officeName:"",
      formInline: {
        productName:"",
        outStatus:"",
        inStatus:"",
        actualType:"",
        status: "",
        startDate: "",
        endDate: "",
        page: 1,
        number: 20,
        BrandType: "",
        channelUid: "",
        productUid: "",
        // officeUid: "",
        // oemUid: localStorage.getItem('uid'),
        officeUid: "", //机构ID
        organizationName: "", //机构名
      },
      dataTime: [],
      eventShow: false,
      machinesShow: false,
      dialogVisible: false,
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      activityType: 1,
      activeUid: "",
      from: false,
    };
  },
  mounted() {
    // this.queryChannelNameList();
    this.queryPayActiveList();  //展示列表
    this.jurisdiction = localStorage.getItem("jurisdiction");   //权限字段获取
  },
  methods: {
    //返回
    back(){
      this.$router.push("inventitoryStatistics")
    },
    // 重置
    reset() {
      this.formInline.productName = "";
      this.formInline.actualType = "";
      this.formInline.inStatus = "";
      this.formInline.outStatus = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.officeName = "";
      this.dataTime = [];
      this.formInline.organizationName=""
      this.queryPayActiveList()
    },
    // 显示列表
    queryPayActiveList() {
      this.from = true;
      this.listLoading = true;
      if (this.dataTime === null) this.dataTime = [];
      this.formInline.startDate = this.dataTime[0];
      this.formInline.endDate = this.dataTime[1];
      this.formInline.channelUid = this.formInline.BrandType;

      if (localStorage.getItem("jurisdiction") == 0) {
        this.formInline.oemUid = localStorage.getItem("uid");
      }

     https.storeRecordListData(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
            
          });
          this.listLoading = false;
          return;
        }
        this.listLoading = false;
        this.tableData = res.data.data;
        this.totalNum = res.data.total;
      });
    },

    //分页 每页多少条数据
    handleSizeChange(val) {
      this.formInline.number = val; //动态改变
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList();
    },
    queryPayActiveLists(){
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList();
    },
    //分页 当前页
    handleCurrentChange(val) {
      console.log(val)
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },

  },
};
</script>

<style scoped>
.con {
  position: relative;
}
.elP {
  width: 100%;
  margin: 20px 0;
  font-size: 15px;
  font-weight: 500;
}
.elbtn {
  float: right;
  margin: 20px;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 12px;
  text-align: right;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
  height: 32px;
  line-height: 5px;
  margin-left: 20px;
  color: #409EFF;
  border-color: #409EFF
}
.btn {
  float: right;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.text {
  color: #999;
}
.search {
  float: right !important;
  height: 0px !important;
  margin-top: 0px !important;
}
/deep/ .el-form-item {
  width: 450px !important;
}
.content{
  margin-top:20px;
  height: calc(100vh - 100px - 27px);

}
</style>
